<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>

<%--    添加业主--%>
    <meta charset="utf-8">
    <title>数据操作 - 数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/style/admin.css" media="all">


    <style>
        #selectBox {
            display: flex;
        }

        #updateHiddenBox {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            /*height: 80%;*/
            margin: auto;
            background-color: #FAFAFA;

        }

        #hiddenTable {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            /*height: 80%;*/
            margin: auto;
            background-color: #FAFAFA;
            z-index: 999999;
        }

        #updateMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }
    </style>

</head>
<body>

<form class="layui-form" id="selectBox"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">公寓号</label>
        <div class="layui-input-block">
            <select name="buildingNumber" lay-verify="required" id="selectBuildingNumber">
                <c:forEach items="${buildingNumberList}" var="buildingNumber">
                    <option value="${buildingNumber}">${buildingNumber}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单元号</label>
        <div class="layui-input-block">
            <select name="unitNumber" lay-verify="required" id="selectUnitNumber">
                <c:forEach items="${unitNumberList}" var="unitNumber">
                    <option value="${unitNumber}">${unitNumber}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">楼层号</label>
        <div class="layui-input-block">
            <select name="floorNumber" lay-verify="required" id="selectFloorNumber">
                <c:forEach items="${floorNumberList}" var="floorNumber">
                    <option value="${floorNumber}">${floorNumber}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <button class="layui-btn" type="button" lay-filter="dynamicQuery" id="dynamicQuery">立即提交</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
</form>

<table class="layui-hide" id="apartmentList" lay-filter="apartmentList" lay-data="{id: 'apartmentList'}"></table>

<div id="hiddenTable">
     <form class="layui-form" id="selectUserBox" action="/apartment/queryApartment"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">查询用户</label>
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="输入姓名或者昵称查询用户"
                   autocomplete="off" class="layui-input" id="selectUserParam">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" lay-filter="dynamicQueryUser" id="dynamicQueryUser">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<table class="layui-hide" id="userList" lay-filter="userList"></table>
</div>

<div id="updateMainBox">
    <div id="updateHiddenBox">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">公寓ID</label>
                <div class="layui-input-block">
                    <input type="text" name="id" class="layui-input" id="apartmentId" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">公寓号</label>
                <div class="layui-input-block">
                    <input type="text" name="buildingNumber" disabled class="layui-input" id="buildingNumber">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单元号</label>
                <div class="layui-input-block">
                    <input type="text" name="unitNumber" disabled class="layui-input" id="unitNumber">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">楼层号</label>
                <div class="layui-input-block">
                    <input type="text" name="floorNumber" disabled class="layui-input" id="floorNumber">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间号</label>
                <div class="layui-input-block">
                    <input type="text" name="roomNumber" disabled class="layui-input" id="roomNumber">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">业主</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required" placeholder="请点击下方按钮选择业主" class="layui-input" id="owner" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">业主ID</label>
                <div class="layui-input-block">
                    <input type="text" name="userId"  class="layui-input" id="ownerId" disabled>
                </div>
            </div>


        <%--            <div class="layui-form-item">--%>
<%--                <label class="layui-form-label">选择框</label>--%>
<%--                <div class="layui-input-block">--%>
<%--                    <select name="city" lay-verify="required">--%>
<%--                        <option value=""></option>--%>
<%--                        <option value="0"><span></span></option>--%>
<%--                        <option value="1">上海</option>--%>
<%--                        <option value="2">广州</option>--%>
<%--                        <option value="3">深圳</option>--%>
<%--                        <option value="4">杭州</option>--%>
<%--                    </select>--%>
<%--                </div>--%>
<%--            </div>--%>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-primary" id="selectUser">选择业主</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="updateFormBtn">立即提交</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="returnWindows">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script type="text/html" id="apartmentButtonList">
    <a class="layui-btn layui-btn-xs" lay-event="edit">添加/编辑用户</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除用户</a>
</script>

<script type="text/html" id="userButtonList">
    <a class="layui-btn layui-btn-xs" lay-event="edit">选择</a>
</script>


<script src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$
            , admin = layui.admin;


        //监听提交
        form.on('submit(updateFormBtn)', function (data) {
            var formData = data.field;
            $.ajax({
                url: "${pageContext.request.contextPath}/apartment/updateApartment",
                type: "post",
                data: JSON.stringify(formData),
                contentType: 'application/json',
                processDate: false,
                success: function (res) {
                    console.log(res);
                    apartmentListTable.reload();
                    // return;
                }
            })
        });

        //指定查询公寓
        $("#dynamicQuery").click(function () {
            var selectBuildingNumber = $("#selectBuildingNumber").val();
            var selectUnitNumber = $("#selectUnitNumber").val();
            var selectFloorNumber = $("#selectFloorNumber").val();
            table.reload('apartmentList',{
                where: { //设定异步数据接口的额外参数，任意设
                    buildingNumber: selectBuildingNumber,
                    unitNumber:  selectUnitNumber,
                    floorNumber:  selectFloorNumber
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        });

        //指定查询用户
        $("#dynamicQueryUser").click(function () {
            var selectUserParam = $("#selectUserParam").val();
            table.reload('userList',{
                where: { //设定异步数据接口的额外参数，任意设
                    selectUserParam: selectUserParam,
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        });



        //表单的验证  自定义验证规则
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }

                //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                if(value === 'xxx'){
                    alert('用户名不能为敏感词');
                    return true;
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });



        var apartmentListTable = table.render({
            elem: '#apartmentList'
            , url: '${pageContext.request.contextPath}/apartment/listApartment'
            // , width: admin.screen() > 1 ? 892 : ''
            // , width: '100%'
            // , height: 332
            , request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            page: true,
            limits: [10, 15, 20]
            , cols: [[
                // {type: 'checkbox', fixed: 'left'},
                // {field: 'id', title: 'ID'},
                {field: 'buildingNumber', title: '公寓号'}
                , {field: 'unitNumber', title: '单元号'}
                , {field: 'floorNumber', title: '楼层号'}
                , {field: 'roomNumber', title: '房间号'}
                , {field: 'userName', title: '当前业主姓名'}
                , {field: 'userPhone', title: '当前业主电话'}
                // , {field: 'wealth', width: 135, title: '财富', sort: true}
                // , {field: 'classify', width: 80, title: '职业'}
                // , {field: 'score', width: 80, title: '评分', sort: true, fixed: 'right'}
                , {width: 300, align: 'center', fixed: 'right', toolbar: '#apartmentButtonList'}
            ]]
        })

        table.render({
            elem: '#userList'
            , url: '${pageContext.request.contextPath}/user/userList'
            // , width: admin.screen() > 1 ? 892 : ''
            // , width: '100%'
            // , height: 332
            , request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            page: true,
            limits: [9]
            , cols: [[
                // {type: 'checkbox', fixed: 'left'},
                // {width: 80,field: 'id', title: 'ID'},
                {width: 80,field: 'userName', title: '姓名'}
                , {width: 80,field: 'userNickname', title: '昵称'}
                , {width: 150,field: 'systemPassword', title: '系统密码'}
                , {width: 80,field: 'status', title: '状态'}
                , {width: 150,field: 'userPhone', title: '电话'}
                , {width: 150,field: 'occupationType', title: '职位'}
                , {width: 150,field: 'birthday', title: '出生日期'}
                , {width: 100, align: 'center', fixed: 'right', toolbar: '#userButtonList'}
            ]]
        })

        //监听表格复选框选择
        table.on('checkbox(test-table-operate)', function (obj) {
            console.log(obj)
        });

        function apartmentTableRender(){
            // table.reload('apartmentList', {
                // url: '/api/table/search'
                // ,where: {} //设定异步数据接口的额外参数
                //,height: 300
            // });
        }


        var apartmentInfo;
        //监听工具条
        table.on('tool(apartmentList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('确定删除该用户吗', function (index) {
                    console.log(data);
                    console.log(index);
                    if (index > 0){
                        $.ajax({
                            url: "${pageContext.request.contextPath}/apartment/updateApartmentUserId",
                            type: "post",
                            data: JSON.stringify(data),
                            contentType: 'application/json',
                            processDate: false,
                            success: function (res) {
                                console.log(res);

                                // return;
                            }
                        })
                        // layer.msg("删除成功");
                        layer.close(index);
                        // apartmentTableRender();
                        apartmentListTable.reload();
                        return;
                    }
                    layer.msg("删除失败");

                });
            } else if (obj.event === 'edit') {
                // layer.alert('编辑行：<br>' + JSON.stringify(data))
                apartmentInfo = data;
                $("#updateMainBox").css("display", "block");
                $("#updateHiddenBox").css("display", "block");
                //设置房间信息
                $("#buildingNumber").val(apartmentInfo.buildingNumber);
                $("#unitNumber").val(apartmentInfo.unitNumber);
                $("#floorNumber").val(apartmentInfo.floorNumber);
                $("#roomNumber").val(apartmentInfo.roomNumber);
                $("#apartmentId").val(apartmentInfo.id);
            }
        });

        //监听工具条
        table.on('tool(userList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                // layer.alert('编辑行：<br>' + JSON.stringify(data))
                console.log(data);
                console.log(apartmentInfo);

                $("#hiddenTable").css("display", "none");
                //设置业主信息
                $("#owner").val("业主：" + data.userName +
                    "      昵称：" + data.userNickname +
                "          电话：" + data.userPhone +
                "          生日：" + data.birthday);
                $("#ownerId").val(data.id);
            }
        });


        $("#returnWindows").click(function returnWindows() {
            $("#updateMainBox").css("display", "none");
            $("#updateHiddenBox").css("display", "none");
            $("#owner").val("");
            $("#ownerId").val("");
        })

        $("#selectUser").click(function viewUserTable() {
            console.log(1)
            $("#hiddenTable").css("display", "block");
        })
        //
        var $ = layui.$, active = {
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('test-table-operate')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            , getCheckLength: function () { //获取选中数目
                var checkStatus = table.checkStatus('test-table-operate')
                    , data = checkStatus.data;
                layer.msg('选中了：' + data.length + ' 个');
            }
            , isAll: function () { //验证是否全选
                var checkStatus = table.checkStatus('test-table-operate');
                layer.msg(checkStatus.isAll ? '全选' : '未全选')
            }
        };

        $('.test-table-operate-btn .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    })
</script>
</body>
</html>